<template>
	<div>
		<div class="title">热销推荐</div>
		<ul>
			<router-link
				tag='li'
				class="item border-bottom" 
				v-for='item of list' 
				:key="item.id"
				:to="'/detail/' + item.id "
			>
				<img :src="item.imgUrl" class="item-img">
				<div class="item-info">
					<p class="item-title">{{ item.title }}</p>
					<p class="item-desc">{{ item.desc }}</p>
					<button type="" class="item-button">查看详情</button>
				</div>	
			</router-link>
		</ul>
	</div>
</template>

<script>
	export default{
		name: "HomeRecommend",
		props: {
			list: Array
		}
		// data (){
		// 	return {
		// 		recommendList: [{
		// 			id: '0001',
		// 			imgUrl: 'http://img1.qunarzz.com/sight/p0/1611/97/97dbde6eccdfef72a3.water.jpg_200x200_e0efe6da.jpg' ,
		// 			title: '东部华侨城',
		// 			msg: '丛林穿梭...生态探险娱乐项目应有尽有'
		// 		},{
		// 			id: '0002',
		// 			imgUrl: 'http://img1.qunarzz.com/sight/p0/1805/6f/6f885ea8b30c67bca3.water.jpg_200x200_21b03a9c.jpg' ,
		// 			title: '世界之窗',
		// 			msg: '丛林穿梭...生态探险娱乐项目应有尽有'
		// 		},{
		// 			id: '0003',
		// 			imgUrl: 'http://img1.qunarzz.com/sight/p0/1805/17/176c2114bb8ae255a3.water.png_200x200_a1b6cfdf.png' ,
		// 			title: '深圳欢乐谷',
		// 			msg: '丛林穿梭...生态探险娱乐项目应有尽有'
		// 		},{
		// 			id: '0004',
		// 			imgUrl: 'http://img1.qunarzz.com/sight/p0/201307/18/f25ac054eec3804dc8d65eac.jpg_200x200_a008b6ca.jpg' ,
		// 			title: '海洋奇梦馆',
		// 			msg: '丛林穿梭...生态探险娱乐项目应有尽有'
		// 		}]
		// 	}
		// }
	}

</script>

<style lang="stylus" scoped="">
	@import '~styles/mixins.styl'
	.title
		margin-top .2rem
		line-height .8rem
		background-color #eee
		text-indent .3rem
	.item
		display flex
		height 1.9rem	
		overflow hidden
		.item-img 
			padding .1rem
			width 1.7rem
			height 1.7rem
		.item-info
			flex 1
			padding .1rem
			min-width 0
			.item-title 
				line-height .54rem
				font-size .32rem
				ellipsis()
			.item-desc
				line-height .4rem
				color #ccc
				ellipsis()
			.item-button
				margin-top .16rem
				padding 0 .2rem
				line-height .44rem
				background-color #ff9300
				border-radius .06rem
				color #fff
</style>